<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="预约状态">
          <el-select v-model="formInline.appstate" placeholder="预约状态">
            <el-option label="预约" value="预约"></el-option>
            <el-option label="客户满意" value="客户满意"></el-option>
            <el-option label="客户不满意" value="客户不满意"></el-option>
            <el-option label="爽约" value="爽约"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="客户姓名">
        <el-input v-model="formInline.uname" placeholder="客户姓名"></el-input>
      </el-form-item> 
      <el-form-item>
        <el-button type="primary" @click="onSubmit"><i class="el-icon-search"></i></el-button>
      </el-form-item>
    </el-form>
    <!-- 操作按钮 -->
    <div>
      <el-button type="primary" plain @click="add">新增</el-button>
      <slot name="right" />
       <el-button-group style="float:right">
        <el-badge :value="1" >
         <el-button plain type="info" icon="el-icon-loading" @click="onSubmit()"/>
        </el-badge>
         <el-button
        icon="el-icon-refresh"
        @click="crud.refresh()"
      />
       </el-button-group>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55">
        <template slot-scope="scope">
          <span style="margin-left: 2px">
            <!-- 复选框 -->
            <label for="label" @click="changestate(scope.row.aid)">
              <input type="checkbox" id="label" />
            </label>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="客户姓名" width="130">
        <template slot-scope="scope">
          <span style="margin-left: 2px">{{ scope.row.uname }}</span>
        </template>
      </el-table-column>

      <el-table-column label="房间编号" width="130">
        <template slot-scope="scope">
          <span style="margin-left: 2px">{{ scope.row.hunm }}</span>
        </template>
      </el-table-column>

      <el-table-column label="预约时间" width="200">
        <template slot-scope="scope">
          <span style="margin-left: 2px">{{
            scope.row.begintime | dateformat("YYYY-MM-DD HH:mm:ss")
          }}</span>
        </template>
      </el-table-column>

      <el-table-column label="结束时间" width="200">
        <template slot-scope="scope">
          <span style="margin-left: 2px">{{scope.row.endtime | dateformat("YYYY-MM-DD HH:mm:ss")}}</span>
        </template>
      </el-table-column>

      <el-table-column label="状态" width="170">
        <template slot-scope="scope">
          <span style="margin-left: 2px">{{ scope.row.appstate }}</span>
        </template>
      </el-table-column>

      <el-table-column label="日志" width="230">
        <template slot-scope="scope">
          <span style="margin-left: 2px">{{ scope.row.log }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="info" @click="handleEdit(scope.row)" >修改</el-button>
          <el-button
            size="mini"
            type="success"
            @click="handleAddOrder(scope.row)">预交订金
          </el-button>
          <el-button size="mini" type="primary" icon="el-icon-check" circle  
          @click="handleAddRecord(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 修改框 -->
    <el-dialog title="修改薪资" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select v-model="appstate" placeholder="预约状态">
            <el-option label="客户满意" value="客户满意"></el-option>
            <el-option label="客户不满意" value="客户不满意"></el-option>
            <el-option label="爽约" value="爽约"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="log" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEditok">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 新增预约的弹窗 -->
    <el-dialog title="新增" :visible.sync="dialogFormAdd">
      <el-form :model="form1">
        <el-form-item label="预约时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['14:00:00', '16:00:00']"
          >
          </el-date-picker>
        </el-form-item>
        
        <el-form-item label="客户姓名" :label-width="formLabelWidth">
          <el-input v-model="uname" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="客户电话" :label-width="formLabelWidth">
          <el-input v-model="phone" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="房间号" :label-width="formLabelWidth">
          <el-select v-model="hid" placeholder="预约状态">
            <el-option label="新界1-1-101" value="1"></el-option>
            <el-option label="新界1-1-102" value="2"></el-option>
            <el-option label="新界1-1-201" value="3"></el-option>
            <el-option label="新界1-1-202" value="4"></el-option>
            <el-option label="新界1-1-301" value="5"></el-option>
            <el-option label="新界1-1-302" value="6"></el-option>
            <el-option label="新界1-1-401" value="7"></el-option>
            <el-option label="新界1-1-402" value="8"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormAdd = false">取 消</el-button>
        <el-button type="primary" @click="handleAddOk">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5, 10, 15]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="sum"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  created() {
    this.list();
  },
  data() {
    return {
      //搜索数据
      formInline: {
        appstate:"",
        eid: "1",
        uname: "",
        phone:"",
        hid: "",
        begintime: "",
        endtime: "",
      },
      form:{},
      form1:{},
      // 列表展示数据
      tableData: "",
      //新增员工信息
      dialogTableAdd: false,
      dialogFormAdd: false,

      //修改预约数据
      dialogTableVisible: false,
      dialogFormVisible: false,

      //分页数据
      current: 1,
      size: 5,
      sum:"", //记录总条数

      formLabelWidth: "120px",
      aid: "",
      uname: "",
      hid: "",
      phone:"",
      begintime: "",
      endtime: "",
      appstate: "",
      log: "",
      hunm: "",
      value1:""
    };
  },
  methods: {
    //搜索方法
    onSubmit() {
      this.list();
    },

    //表格颜色
     tableRowClassName({row, rowIndex}) {
        let now=new Date();
        let d1=row.begintime;

        if (d1.getTime < now.getTime) {
          return 'warning-row';
        } else if (row.salstate == 2) {
          return 'success-row';
        }
        return '';
    },

    list() {
      let self = this;
      let parm = {
        aid: this.aid,
        appstate: this.formInline.appstate,
        log: this.log,
        phone:this.phone
      };
      this.$axios.post("/self/appt/find?current=" + this.current + "&size=" + this.size,parm

        )
        .then((res) => {
          console.log(res), (self.tableData = res.data.list);
          console.log(res),(self.sum=parseInt(res.data.total));
        })
        .catch((err) => {
          console.error(err);
        });
    },

    //修改预约状态
    handleEdit(row) {
      this.aid = row.aid;
      this.appstate = row.appstate;
      this.log = row.log;
      this.dialogFormVisible = true;
    },
    //确认修改预约信息
    handleEditok() {
      this.dialogFormVisible = false;
      let parm = {
        aid: this.aid,
        appstate: this.appstate,
        log: this.log,
        phone:this.phone
      };
      this.$axios.post("/self/appt/updateAppt", parm).then((res) => {
        this.list();
      });
    },
    //新增预约单方式
    add() {
      this.dialogFormAdd = true;
    },
    //新增确认按钮
    handleAddOk() {
      this.dialogFormAdd = false;
      let parm = {
        uname: this.uname,
        begintime: this.value1[0],
        endtime: this.value1[1],
        phone:this.phone,
        hunm: this.hunm,
        hid:this.hid,
      };
      this.$axios.post("/self/appt/saveAppt", parm).then((res) => {
        this.message("添加成功");
        this.list();
      });
    },
    //生成订单
    handleAddOrder(row){
      let params={
        aid:row.aid,
      }
      this.$axios.post("/self/order/saveByAppt",params).then(res => {
        this.$message("订金支付成功");
        this.list();
      })
    },
     //生成记录
    handleAddRecord(row){
      let params={
        aid:row.aid,
      }
      this.$axios.post("/self/appt/saveRecord",params).then(res => {
        this.$message("订金支付成功");
        this.list();
      })
    },
    //搜索方法
    onSubmit() {
      this.list();
    },
    //分页
    //每页几条
    handleSizeChange(val) {
      this.size = val;
      this.onSubmit();
    },
    //第一页
    handleCurrentChange(val) {
      this.current = val;
      this.onSubmit();
    },
  },
};
</script>

